<template>
  <el-dialog :title="data.title" v-model="isShow" :close-on-click-modal="false" @close="close" style="width: 90%" top="8vh">
    <div class="app-store">
      <div class="col">
        <el-tag size="large">{{data.storeName}}</el-tag>
        <el-table :data="appStoreList" border height="500" :loading="loading">
          <el-table-column label="应用" fixed="left" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-button class="row-inline" type="danger" size="small" @click="handleBtn(scope.$index, scope.row, 'store-off')">下架</el-button>
              <img class="row-inline" :src="scope.row.appicon" style="width: 32px;height: 32px;"/>
              <span class="row-inline">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column property="remark" label="应用说明" width="125" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column property="version" label="版本" width="100" sortable :show-overflow-tooltip="true"></el-table-column>          
        </el-table>
      </div>
      <div class="col" style="align-items: flex-end;">
        <div class="row" style="width: 260px;" v-if="data.clientId==user.clientId || user.power>90">
          <el-input v-model="data.appName" placeholder="请输入应用名称关键字" />
          <el-button type="primary" @click="getList('app',data.appName)">搜索</el-button>
        </div>
        <div v-else>
          <el-tag size="large" type="success">可用的应用列表</el-tag>
        </div>
        <el-table :data="appSpoolList" border height="500" :loading="loading">
          <el-table-column label="应用" fixed="left" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-button class="row-inline" type="success" size="small" @click="handleBtn(scope.$index, scope.row, 'store-on')">上架</el-button>
              <img class="row-inline" :src="scope.row.appicon" style="width: 32px;height: 32px;"/>
              <span class="row-inline">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column property="remark" label="应用说明" width="125" sortable :show-overflow-tooltip="true"></el-table-column>
          <el-table-column property="version" label="版本" width="100" sortable :show-overflow-tooltip="true"></el-table-column>          
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getCurrentInstance, reactive, ref } from "vue-demi";
import { ElMessageBox, ElNotification } from 'element-plus';
import mqtt from '@/assets/js/mqtt';
import util from '@/assets/js/util';
export default {
  setup(props,ctx) {
    const Global = getCurrentInstance().proxy
    let isShow = ref(false);

    let user = reactive({
      code: Global.$var.user.code,
      id: Global.$var.user.id,
      username: Global.$var.user.username,
      power: Global.$var.user.power,
      clientId: Global.$var.user.clientId,
    });

    function mqttOnMsg() {
      mqtt.onMsg((t,m)=>{
        loading.value = false
        let r = JSON.parse(m)
        if (r.data.returnCode == 10000) {
          let d = r.data.data
          if (r.msgType == 208) {
            let apps = (d && d[0] && d[0].apps) ? d[0].apps : []
            let cId = (d && d[0] && d[0].apps) ? d[0].Id : '-1'
            for (let i in apps) {
              apps[i].upload_time = util.formatGmt(apps[i].upload_time)
              // apps[i].appicon = 'https://img.51miz.com/Element/00/85/31/09/beb693ce_E853109_0e790627.png'
            }
          //console.log(cId,user.clientId,data.clientId)
            let appFlag = sessionStorage.getItem('APP_FLAG')
            if (appFlag == 'APP_STORE' || appFlag == 'APP_SPOOL') {
              if (cId == user.clientId) {
                if (data.clientId == user.clientId) {
                  appStoreList.value = apps
                } else {
                  appSpoolList.value = apps
                } 
              } else {
                appStoreList.value = apps
              }  
            }
          }
          if (r.msgType == 90210) {
            for (let i in d) {
              d[i].upload_time = util.formatGmt(d[i].upload_time)
              // d[i].appicon = 'https://img.51miz.com/Element/00/85/31/09/beb693ce_E853109_0e790627.png'
            }
            let appFlag = sessionStorage.getItem('APP_FLAG')
            if (appFlag =='APP_SPOOL') {
              appSpoolList.value = d
            }
          }
          if (r.msgType == 90212 || r.msgType == 90213) {
            getList('store','')
          }
        }  
      })
    }

    let data = reactive({
      title: '应用上下架管理',
      storeName: '',
      appName: '',
      clientId: '',
    })

    function open(d) {
    //console.log(d)
      mqttOnMsg()
      data.storeName = d.name + "的应用商店";
      data.appName = ''
      data.clientId = d.Id
      isShow.value = true;
      getList('store','')
      if (user.power > 90 || data.clientId == user.clientId) {
        getList('app','')
      } else {
        getList('store',user.clientId)
      }
    }

    function close() {
      isShow.value = false;
      ctx.emit("done", null);
    }

    let loading = ref(false);
    let appStoreList = ref([])
    let appSpoolList = ref([])
    function getList(flag,key) {
      loading.value = true
      let msgCode = 90210
      let m = {}
      m.status = 0
      m.indexPage = 1
      m.pageSize = 50
      if (flag == 'store') {
        sessionStorage.setItem('APP_FLAG','APP_STORE')
        msgCode = 208
        if (isNull(key)) m.plat_user_id = data.clientId
        else m.plat_user_id = key
      }
      if (flag == 'app') {
        sessionStorage.setItem('APP_FLAG','APP_SPOOL')
        msgCode = 90210
        m.appname = key
      }
      let topic = mqtt.TOPIC_REQ+msgCode
      let g = {}
      g.msgType = msgCode
      g.clientId = user.id
      g.userName = user.username
      g.message = m
    //console.log(flag+'查询'+key+'应用：',JSON.stringify(g))
      mqtt.publish(topic,JSON.stringify(g))
      if (flag == 'app') appSpoolList.value = []
      if (flag == 'store') appStoreList.value = []
    }

    function handleBtn(i, r, f) {
      if (f == 'store-on') {
        let asCount = appStoreList.value.length
        if (asCount >= 20) {
          ElNotification({
            type: 'warning',
            title: '每个用户最多上架20个应用',
            message: "当前用户已上架"+asCount+"个应用"
          })
          return
        }
      }
      // console.log(i, r, f);
      loading.value = true
      let msgCode = 90213
      let m = {}
      m.appid = r.Id
      m.plat_user_id = data.clientId
      if (f == 'store-off') {
        msgCode = 90212 
      }
      if (f == 'store-on') {
        msgCode = 90213
      }
      let topic = mqtt.TOPIC_REQ+msgCode
      let g = {}
      g.msgType = msgCode
      g.clientId = user.id
      g.userName = user.username
      g.message = m
    //console.log(f+'应用：',JSON.stringify(g))
      mqtt.publish(topic,JSON.stringify(g))
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      isShow,user,data,loading,appStoreList,appSpoolList,
      open,close, getList, handleBtn, isNull
    };
  },
};
</script>

<style lang="scss" scoped>
.app-store{
  @extend %view-flex;
  flex-direction: row;
  width: 100%;
  .col{
    @extend %view-flex;
    align-items: flex-start;
    width: 50%;
  }
  .row{
    @extend %view-flex;
    flex-direction: row;
  }
  .row-inline{
    vertical-align: middle;
  }
}
</style>